<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>bootstrap后台模板设计</title>
    <!--主要样式控制-->
    <link href="../b_css/bootstrap-table.css" rel="stylesheet">
    <link href="../b_css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../b_css/bootstrapValidator.css"/>
    <link href="../b_css/page/user.css" rel="stylesheet">
    <link href="../b_css/base.css" rel="stylesheet">
    <link href="../b_css/toastr.css" rel="stylesheet">
    <link href="../b_css/fileinput.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/css/fileinput.min.css" rel="stylesheet">
</head>
<body>
    <div class="box_table">
          <!-- 新增按钮 -->
          <div class="btn-group" role="group" aria-label="...">
            <button style="border:none;" data-toggle="modal" data-target="#myModal" onclick='newClick()' type="button" class="btn btn-primary">新增</button>
          </div>
          <table
              id="table"
              data-toggle="table"
              data-height="600"
              data-search="true"
              data-ajax="ajaxRequest"
              data-pagination="true">
          </table>

          <!-- 新增弹窗 -->
          <div class="modal fade" tabindex="-1" id="myModal" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">新增</h4>
                        </div>
                        <div class="modal-body" style="min-height: 400px;">
                            <section>
                                <div class="">
                                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">餐台名称</label>
                                            <div class="col-lg-8">
                                                <input type="text" class="form-control" placeholder="请输入餐台名称" name="name" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">使用状况</label>
                                            <div class="col-lg-8">

                                                <input type="radio" name="isUse" value="0" />否

                                                <input type="radio" name="isUse" value="1" />是
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">餐台类型</label>
                                            <div class="col-lg-8">
                                                <input type="radio" name="tableType" value="1" />小桌/2人位
                                                <input type="radio" name="tableType" value="2" />大桌/4人位

                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </section>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary bth_new">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- 引入样式文件和动态控制 -->
    <script src="../b_js/jquery-3.2.1.min.js"></script>
    <script src="../b_js/utils.js"></script>
    <script src="../b_js/toastr.min.js"></script>
    <script src="../b_js/bootstrap.min.js"></script>
    <script src="../b_js/bootstrap-table.js"></script>
    <script src="../b_js/bootstrapValidator.js"></script>
    <script src="../b_js/fileinput.js"></script>
    <script src="../b_js/bootstrapValidator.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/js/locales/zh.js"></script>

    <script type="text/javascript">
        var rows = 10;
        var total = 0;
        var pageNum= 1;
        var type= 'add';
        var editRid= '';
        $('#table').bootstrapTable({
        // url: upUrl + '/user/mgr/userList',        // 表格数据来源
        pageNumber: pageNum,                      //初始化加载第一页，默认第一页,并记录
        pageSize: rows,                     //每页的记录行数（*）
        total: total,
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        striped: true,
        queryParams: function(params){
            return {
                // pageSize: rows,
                // pageNum: pageNum
            };
        },
        columns: [
            {
                field: 'num',
                align: 'center',
                title: '序号',
                formatter: num,
            },
            {
                field: 'name',
                align: 'center',
                title: '名称',
                width: 300,
            },
            {
                field: 'isUseStr',
                align: 'center',
                title: '使用状况',
                width: 200,
            },
            {
                field: 'tableTypeStr',
                align: 'center',
                title: '餐台类型',
                width: 300,
            },
            {
                field: '编辑',
                align: 'center',
                title: '操作',
                width: 200,
                formatter: operateFormatter,
            },
        ]
    });
    var imgList = [];
    var imgurl  = '';
    var formData = '';
    //上传附件
    function uploadImg() {
        // debugger;
        if($("#file").val() != "") {
            var form = document.getElementById("defaultForm");
		    formData = new FormData(form);
            $.ajax({
                type: "POST",
                url:upUrl + "/uploadImg",//后台接口
                data: formData,
                processData: false,//告诉jq不要处理发送的数据
                contentType: false,//告诉jq不要设置content-Type请求头
                success: function(d){
                    if(d.code == 200) {
                        imgList[0] = d.message
                        imgurl = d.message
                        //图片显示
                        $("#avatar").attr("value",d.message);
                        // $("#avatarShow").attr("src",d.message);
                        var orderBody = '';
                        $.each(imgList, function (index, val) {
                            orderBody += '<img src="' + val + '" alt="" id="avatarShow" width="50px" height="50px" style="margin-left；8px">'
                        })
                        $('.claa_img').html(orderBody);
                    }
                },
            });
        } else {
            toastr.error('请先选择文件');
        }
    };

    // 获取列表接口事件
    function ajaxRequest(params) {
        console.log(params)
        var url = upUrl + '/diningTable/mgr/diningTableList'
        // var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'
        $.get(url + '?' + $.param(params.data)).then(function (res) {
            total = res.result.total
            params.success(res.result.records)
        })
    };
    /*-------------------------------------------新增逻辑---------------------------------------------*/
    // 新增确认事件
    $(".bth_new").on("click", function(){
        //获取表单对象
        var bootstrapValidator = $('#defaultForm').data('bootstrapValidator');
            //手动触发验证
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
                //表单提交的方法、比如ajax提交
                if (type == 'add') {
                    var form = document.getElementById("defaultForm");
                    formData = new FormData(form);
                    $.ajax({
                        type: "POST",
                        url:upUrl + "/diningTable/addDiningTable",//后台接口
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(d){
                            if(d.code == 200) {
                                toastr.success("新增成功!");
                                $('#myModal').modal('hide');
                                // 重新刷新表格数据
                                $('#table').bootstrapTable('refresh');
                            }
                        },
                    });
                } else {
                    var form = document.getElementById("defaultForm");
                    formData = new FormData(form);
                    formData.append(`id`, editRid)
                    $.ajax({
                        type:"post",
                        url: upUrl + "/diningTable/updateDiningTable",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success:function(data){
                            if (data.code == 200) {
                                toastr.success("编辑成功!");
                                $('#myModal').modal('hide');
                                // 重新刷新表格数据
                                $('#table').bootstrapTable('refresh');
                            } else {
                                toastr.error(data.message);
                            }
                        }
                    })
                }
            }
    });
    // 取消事件
    $(".btn-default").on("click", function(){
        $("input[name='rname']").val('').change();
        $("textarea[name='routeIntroduce']").val('').change();
        $("input[name='price'][value=1]").attr("checked",true);
        $("input[name='rdate']").val('').change();
        $('#defaultForm').data("bootstrapValidator").resetForm();
        imgList = [];
        $('.claa_img').html('')
    });
    var PySheDingI
    // 操作列
    function operateFormatter(value,row,index) {
        //row 获取这行的值 ，index 获取索引值{
        return [
      "<button type='button' style='border:none;margin-right:10px;' data-toggle='modal' data-target='#myModal' class='btn btn-small btn-info' id='m-callback-this-start'onclick='editClick(" + index + ")'>编辑</button><button type='button' class='btn btn-small btn-info'style='margin-right:10px;'  style='border:none;' id='m-callback-this-start'onclick='deleteClick(" + row.id + ")'>删除</button>" ].join('');

    };
    function num(value,row,index) {
        //row 获取这行的值 ，index 获取索引值{
        return [index + 1]

    };
    /*-------------------------------------------编辑逻辑---------------------------------------------*/
    // 取消事件
    $(".bth_edit_q").on("click", function(){
        $('#defaultForm').data("bootstrapValidator").resetForm();
    });
    // 新增事件
    function newClick(row) {
        type='add'
        $('#defaultForm').data("bootstrapValidator").resetForm();
        $('.modal-title').text('新增餐台')
    }
    // 编辑事件
    function editClick(index) {
        imgList = []
        $('.modal-title').text('编辑餐台')
        type='edit'
        editRid = $("#table").bootstrapTable("getData")[index].id;
        $.ajax({
            type:"get",
            url: upUrl + "/diningTable/getDetailByRid",
            data: {
                id:$("#table").bootstrapTable("getData")[index].id,
            },
            success:function(data){
                var detailData = data.result
                $("input[name='name']").val(detailData.name).change();
                $("input[name='isUse']").val([detailData.isUse]);
                $("input[name='tableType']").val([detailData.tableType]);
            }
        })
    }
    // 删除事件
    function deleteClick(row) {
        console.log(row)
        if (confirm("确认要删除吗？")) {
            $.post( upUrl + "/diningTable/deleteDiningTable",{id:row},function (data) {
                if (data.code == 200) {
                    toastr.success("删除成功!");
                    // 重新刷新表格数据
                    $('#table').bootstrapTable('refresh');
                } else {
                    toastr.error(data.message);
                }
            })
        }
    }
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: '请输入餐台名称'
                            }
                        }
                    },
                    isUse: {
                        validators: {
                            notEmpty: {
                                message: '请选择餐台使用状况'
                            }
                        }
                    },
                    tableType: {
                        validators: {
                            notEmpty: {
                                message: '请选择餐台类别'
                            }
                        }
                    },
                }
            }).on('success.form.bv', function(e) {
                // console.log(e)
                    e.preventDefault();
                    $('#defaultForm').data('bootstrapValidator').disableSubmitButtons(true);
                })
        });
        </script>
    </body>
</html>